<template>
  <div id="userLogin">
    <div class="container">
      <div class="title-bar">
        <img src="@/assets/rose.svg" width="80px" />
        <text class="title">RoseOJ</text>
      </div>
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="登陆">
          <div class="form">
            <a-form
              :model="loginForm"
              layout="vertical"
              :style="{ width: '600px' }"
              @submit-success="handleLogin"
              :rules="loginRules"
            >
              <a-form-item
                field="userAccount"
                tooltip="账号长度区间为4~10"
                label="账号"
              >
                <a-input
                  v-model="loginForm.userAccount"
                  placeholder="请输入账号"
                />
              </a-form-item>
              <a-form-item
                tooltip="密码长度区间为8~12"
                field="userPassword"
                label="密码"
              >
                <a-input-password
                  v-model="loginForm.userPassword"
                  placeholder="请输入密码"
                />
              </a-form-item>
              <a-form-item>
                <div class="button">
                  <a-button
                    html-type="submit"
                    style="width: 150px"
                    type="primary"
                    >登录
                  </a-button>
                </div>
              </a-form-item>
            </a-form>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="注册">
          <div class="form">
            <a-form
              :model="registerForm"
              layout="vertical"
              :style="{ width: '600px' }"
              @submit-success="handleRegister"
              :rules="registerRules"
            >
              <a-form-item
                field="userAccount"
                tooltip="账号长度区间为4~10"
                label="账号"
              >
                <a-input
                  v-model="registerForm.userAccount"
                  placeholder="请输入账号"
                />
              </a-form-item>
              <a-form-item
                tooltip="密码长度区间为8~12"
                field="userPassword"
                label="密码"
              >
                <a-input-password
                  v-model="registerForm.userPassword"
                  placeholder="请输入密码"
                />
              </a-form-item>
              <a-form-item
                tooltip="确认密码必须和密码一致"
                field="checkPassword"
                label="确认密码"
              >
                <a-input-password
                  v-model="registerForm.checkPassword"
                  placeholder="请输入密码"
                />
              </a-form-item>
              <a-form-item>
                <div class="button">
                  <a-button
                    html-type="submit"
                    style="width: 150px"
                    type="primary"
                    >注册
                  </a-button>
                </div>
              </a-form-item>
            </a-form>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import {
  UserControllerService,
  UserLoginRequest,
  UserRegisterRequest,
} from "../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();

/**
 * 登陆
 */
const loginForm = reactive({
  userAccount: "",
  userPassword: "",
} as UserLoginRequest);
const handleLogin = async () => {
  const res = await UserControllerService.userLoginUsingPost(loginForm);
  if (res.code === 0) {
    message.success("登录成功");
    store.dispatch("getLoginUser");
    router.push({
      path: "/",
      replace: true,
    });
  } else {
    message.error("登录失败，" + res.message);
  }
};
const loginRules = {
  userAccount: [
    {
      required: true,
      message: "账号是必填项",
    },
    {
      minLength: 4,
      message: "账号最短为四位",
    },
    {
      maxLength: 10,
      message: "账号最长为十位",
    },
  ],
  userPassword: [
    {
      required: true,
      message: "密码是必填项",
    },
    {
      minLength: 8,
      message: "密码最短为八位",
    },
    {
      maxLength: 12,
      message: "密码最长为十二位",
    },
  ],
};

/**
 * 注册
 */
const registerForm = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
} as UserRegisterRequest);
const handleRegister = async () => {
  const res = await UserControllerService.userRegisterUsingPost(registerForm);
  if (res.code === 0) {
    message.success("注册成功");
  } else {
    message.error("注册失败，" + res.message);
  }
  registerForm.userAccount = "";
  registerForm.userPassword = "";
  registerForm.checkPassword = "";
};
const registerRules = {
  userAccount: [
    {
      required: true,
      message: "账号是必填项",
    },
  ],
  userPassword: [
    {
      required: true,
      message: "密码是必填项",
    },
  ],
  checkPassword: [
    {
      required: true,
      message: "确认密码是必填项",
    },
    {
      validator: (value: any, cb: any) => {
        if (value !== registerForm.userPassword) {
          cb("两次密码不一致");
        } else {
          cb();
        }
      },
    },
  ],
};
</script>

<style scoped>
#userLogin {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 82vh;
  background: url("https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png");
  background-size: contain;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: white;
  height: 80%;
  width: 20%;
  border: 1px #b5b1b1 solid;
  box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 0 30px;
}

.title-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 30px;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>
